import React, { useState } from 'react'
import { Form, InputNumber } from 'antd'
import { FormInstance } from 'antd/es/form/Form'
import styles from '../../index.module.less'

interface Iprops {
  label: string
  name: string
  wrapperForm: FormInstance
}

export default (props: Iprops) => {
  const { label, name, wrapperForm } = props
  // help
  const [helpContent, setHelpContent] = useState<string>('')
  const checkHandle = () => {
    const first = wrapperForm.getFieldValue(`${name}PhaseNumber`)
    const second = wrapperForm.getFieldValue(`${name}InstrumentNumber`)
    if ((!first && second) || first < second) {
      setHelpContent(`${label}器械相关部位数不能大于总部位数`)
    } else {
      setHelpContent('')
    }
  }
  return (
    <div className={styles['table-info']}>
      <div className={styles.left}>{label}</div>
      <div className={styles.firstContent}>
        <Form.Item wrapperCol={{ span: 24 }} name={`${name}PhaseNumber`}>
          <InputNumber precision={0} onChange={checkHandle} controls={false} min={1} placeholder='请输入' />
        </Form.Item>
      </div>
      <div className={styles.content}>
        <Form.Item
          wrapperCol={{ span: 24 }}
          name={`${name}InstrumentNumber`}
          validateStatus={helpContent ? 'error' : ''}
          help={helpContent}
        >
          <InputNumber precision={0} onChange={checkHandle} controls={false} placeholder='请输入' />
        </Form.Item>
      </div>
    </div>
  )
}
